$(function () {
  function getCategoryList() {
    $.get("/admin/category/list", function (res) {
      let html = "";
      res.data.forEach(value => {
        html += `<option value="${value.id}" >${value.name}</option>`;
      });
      $("#category").html(html);
    })
  }


  // 3 初始化 日期选择器
  function renderDate() {
    //执行一个laydate实例
    layui.laydate.render({
      elem: '#articleDate' //指定元素
    });
  }

  // 4 初始化富文本编辑器
  function renderEditor() {
    tinymce.init({
      selector: '#articleContent',
      language: 'zh_CN',//注意大小写
    });
  }

  // 1 文件上传框 绑定 change事件
  $("#inputCover").change(function () {
    const file = this.files[0];//  this 理解为  文件上传框 #inputCover dom 元素
    $("#coverimg").prop("src", URL.createObjectURL(file)); // 会返回 浏览器内存中的图片的地址 
  })


  // 2 发送请求 获取 文章列表数据 /admin/category/list
  getCategoryList();

  // 3 初始化 日期选择框
  renderDate();

  // 4 初始化 富文本编辑器
  renderEditor();

  // 5  给发布按钮 绑定点击事件 /admin/article/publish
  // formData 主要是用在文件上传 
  $(".btn-edit").click(function () {
    postArticle("已发布");
  })

  // 5 给 “草稿” 绑定点击事件
  $(".btn-draft").click(function () {
    postArticle("");
  })


  // 6 新增文章或者新增草稿
  function postArticle(state) {
 
      // 5.1 创建了一个formdata对象
      const fd = new FormData($("#form")[0]);
  
  
      // 5.2.5 获取富文本的内容
      const content = tinyMCE.editors["articleContent"].getContent();
  
      fd.append("content", content);
      fd.append("state", state );
  
      fd.forEach((value,key)=>console.log(value,key));
  
      // 5.2.3    因为我们之前有学习过 只不过 忘记了遗忘了！！ 
  
      $.ajax({
        url:"/admin/article/publish",
        type:"post",
        data:fd,
        contentType:false,
        processData:false,
        success(res){
          // console.log(res);
          if(res.code===200){
            // 5.3 返回文章列表页面
            location.href="article_list.html";
          }
        }
      })
    
  }



})